<template>
	<view class="scroll-cont">
		<view class="scroll-left">
			<scroll-view scroll-y style="height: 100vh;" :scroll-top="scrollLeftTop" @scroll="scrollLeft">
				<block v-for="(item,index) in classfiy" :key="index">
					<view class="scroll-goods-nav scroll-left-name">
						<view  class="h3" :class="{active:isMenuActive==index}">{{item.name}}</view>
						<view class="ul">
							<view class="li" @click="navigateTo(`/pages/goods/index?cat_id=${itemChild.id}`)" :key="indexChild" v-for="(itemChild,indexChild) in item.child">{{itemChild.name}}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="scroll-right">
			<scroll-view scroll-y style="height: 100vh;">
				<view class="scroll-right-nav">
					<view 
					class="li"
					:class="{active:isMenuActive==index}" 
					v-for="(item,index) in parentList" 
					@click="scrollTopRight(index)"
					:key="index">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMenuActive: 0,
				parentList: [],
				classfiy:[],
				scrollTopList:[],
				scrollLeftTop:0
			}
		},
		mounted() {
			const classfiy = JSON.parse(this.$Shop.getStorage('classfiy'))
			this.classfiy = classfiy;
			const parentList = classfiy.map((item) => {
				return {
					id: item.id,
					name: item.name
				} 
			})
			this.parentList = parentList
			this.$nextTick(()=>{
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(`.scroll-left-name`).boundingClientRect(data => {
					data.forEach((item)=>{
						this.scrollTopList.push(item.top)
					})
				}).exec();
			})
		},
		methods:{
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			scrollLeft(e){
				this.scrollTopList.forEach((item,index)=>{
					if(e.detail.scrollTop>=(item-50)){
						this.isMenuActive = index
					}
				})
				
			},
			scrollTopRight(i){
                this.isMenuActive = i;
				this.scrollLeftTop = this.scrollTopList[i]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-cont {
		display: flex;
		justify-content: space-around;
		background: #fff;

		.scroll-left {
			width: 70%;

			.scroll-goods-nav {
				margin-bottom: 20rpx;
				text-align: center;

				.h3 {
					display: inline-block;
					text-align: center;
					position: relative;
					padding: 20rpx 50rpx;
					margin: 0 auto;

					&.active {
						color: #ed1475;
					}

					&::after {
						display: block;
						content: '';
						width: 30rpx;
						height: 1rpx;
						background: #ccc;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0, -50%)
					}

					&::before {
						display: block;
						content: '';
						width: 30rpx;
						height: 1rpx;
						background: #ccc;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0, -50%);
					}
				}

				.ul {
					width: 94%;
					margin: 0 auto;
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;

					.li {
						padding-bottom: 20rpx;
						width: 25%;
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.scroll-right {
			width: 30%;
			border-left: 1px solid #eee;

			.scroll-right-nav {
				.li {
					text-align: center;
					color: #373737;
					font-size: 26rpx;
					padding-top: 26rpx;

					&.active {
						color: #ed1475;
					}
				}
			}
		}
	}
</style>
